﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<meta http-equiv="content-Type" content="text/html;charset=gb2312">
		<script src="../js/DateJS.js" type="text/javascript">
		</script>
	</head>
	<style type="text/css">
		body {
			background-color: #3994EE;
			text-align: center;
		}
		
		.div1 {
			background-image: url(img/1.png);
			width: 118px;
			height: 60px;
			color: #F6F6F6;
			float: left;
		}
		
		.div1:hover {
			background-image: url(img/2.png);
		}
		
		.div1:active {
			background-image: url(img/3.png);
		}
		
		a {
			text-decoration: none;
		}
		
		.div2 {
			height: 1px;
		}
		
		.div3 {
			border: #0CF solid 2px;
			height: 600px;
			margin-top: 65px;
			background-color: #E7FEED;
		}
		
		.table tr {
			font-family: "幼圆";
			height: 35px;
			background-color: #e7ebff;
			color: #5A5A5A;
			line-height: 1;
			font-size: 18px;
		}
		
		.table tr:hover {
			text-decoration: none;
			line-height: 1;
			background-color: #F0FFF8;
			color: #F60;
			cursor: pointer;
		}
	</style>

	<body>
		<div id="queryStaffDepartment">
			<div class="div2">
				<table width="590" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="118">
							<a href="bbgl1.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 新聘员工表</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="bbgl2.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 离职员工表</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="bbgl3.html">
								<div class="div1" style=" background-color:#F90">
									<h4 style="text-align:center; line-height:0"> 部门调动表</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="bbgl4.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 岗位调动表</h4>
								</div>
							</a>
						</td>
					</tr>
				</table>
			</div>
			<div align="center" class="div3">
				<form action="" method="post">
					<hr />
					<h3>部门调动统计</h3> 开始日期
					<input type="date" style="border:1px solid #999;" v-model="start_time" /> &nbsp; &nbsp; &nbsp; 结束日期
					<input type="date" style="border:1px solid #999;" v-model="end_time" />
					<input type="button" value="提交" @click="QueryDepartmentStaff()" />
					<input name="" type="reset" />
					<input name="page" type="hidden" value="-1" />
					<hr />
				</form>
				<table class="table">
					<tr>
						<td>员工编号</td>
						<td>员工姓名</td>
						<td>原部门名称</td>
						<td>新部门名称</td>
						<td>调动时间</td>
						<td>调动原因</td>
						<td>备注</td>
						<td>查看个人信息</td>
					</tr>

					<tr v-for="item in departmentStaffList">
						<td v-text="item.id"></td>
						<td v-text="item.user_name"></td>
						<td v-text="item.after_dept"></td>
						<td v-text="item.department"></td>
						<td v-text="item.dept_transfer_date"></td>
						<td v-text="item.dept_cause"></td>
						<td v-text="item.dept_remarks"></td>
						<td>
							<a href="ygxxxx.html">查看个人信息</a>
						</td>

					</tr>

				</table>
				共{{total}}条,当前是第{{pageNum}}页&nbsp;一共{{pages}}页
				<button @click="prePage()">上一页</button>
				<button @click="nextPage()">下一页</button>

			</div>
		</div>

		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			var newdate = new Date();
			if(newdate.getMonth() < 9 && newdate.getDate() <= 9) {
				var current_time = newdate.getFullYear() + "-0" + (newdate.getMonth() + 1) + "-0" + newdate.getDate();
				var month_time = newdate.getFullYear() + "-0" + (newdate.getMonth() + 1) + "-01";
			} else if(newdate.getMonth() < 9 && newdate.getDate() > 9) {
				var current_time = newdate.getFullYear() + "-0" + (newdate.getMonth() + 1) + "-" + (newdate.getDate());
				var month_time = newdate.getFullYear() + "-0" + (newdate.getMonth() + 1) + "-01";
			} else {
				var current_time = newdate.getFullYear() + "-" + (newdate.getMonth() + 1) + "-" + newdate.getDate();
				var month_time = newdate.getFullYear() + "-" + (newdate.getMonth() + 1) + "-01";
			}
			axios.defaults.baseURL = "http://176.55.4.113"
			const queryStaffDepartment = new Vue({
				el: "#queryStaffDepartment",
				data: {
					departmentStaffList: [],
					start_time: this.month_time,
					end_time: this.current_time,
					total: '',
					pages: '',
					pageNum: '',
					pageSize: ''
				},
				methods: {
					QueryDepartmentStaff() {
						axios.get("/statement/department?start_time=" + this.start_time + "&end_time=" + this.end_time + "&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize)
							.then(result => {
								console.log(result)
								this.departmentStaffList = result.data.data.list
								this.total = result.data.data.total
								this.pages = result.data.data.pages
								this.pageNum = result.data.data.pageNum
								this.pageSize = result.data.data.pageSize
							})
					},
					prePage() {
						if(this.pageNum > 1) {
							axios.get("/statement/department?start_time=" + this.start_time + "&end_time=" + this.end_time + "&pageNum=" + (this.pageNum - 1) + "&pageSize=" + this.pageSize)
								.then(result => {
									this.departmentStaffList = result.data.data.list
									this.total = result.data.data.total
									this.pages = result.data.data.pages
									this.pageNum = result.data.data.pageNum
									this.pageSize = result.data.data.pageSize
								})
						}
					},
					nextPage() {
						if(this.pageNum < this.pages) {
							axios.get("/statement/department?start_time=" + this.start_time + "&end_time=" + this.end_time + "&pageNum=" + (this.pageNum + 1) + "&pageSize=" + this.pageSize)
								.then(result => {
									this.departmentStaffList = result.data.data.list
									this.total = result.data.data.total
									this.pages = result.data.data.pages
									this.pageNum = result.data.data.pageNum
									this.pageSize = result.data.data.pageSize
								})
						}
					},
					DeleteStaff(id) {
						if(confirm('确定要删除吗') == true) {
							axios.delete("/staff/delete?id=" + id)
								.then(result => {
									if(result.data.status == 200) {
										alert("删除成功")
										this.QueryStaff()
									} else {
										alert("删除失败")
										this.QueryStaff()
									}
								})
						} else {
							alert("删除失败")
						}
						this.QueryStaff()
					}
				},
				mounted() {
					this.QueryDepartmentStaff()
				}
			})
		</script>
	</body>

</html>